<template>
  <div @click="popSwiperShow=false">
    <div v-if="popSwiperShow" class="popSwiper">
      <div class="imgPercent" >
        <span>{{swiperIndex + 1}}/{{imgSrc.length}}</span>
      </div>
      <mt-swipe :speed="0" :auto="0"   :defaultIndex="swiperIndex" :showIndicators="false"  @change="handleChange" >
        <mt-swipe-item v-for="img in imgSrc" :key="img.id"><img :src="img.image_path"></mt-swipe-item>
      </mt-swipe>
    </div>
  </div>
</template>
<script>
  export default {
    props:["imgSrc","handleChange"],
    data () {
      return {
        swiperIndex:0,
        popSwiperShow:false
      }
    }
  }
</script>
<style lang="stylus">
.popSwiper
  position fixed
  z-index 9999
  width 100%
  height 100%
  top 0
  left 0
  background-color #000
  padding 40px 0 100px
  .imgPercent
    color #fff
    position absolute
    bottom 40px
    left 50%
    transform translateX(-50%)
    font-size 20px
  .mint-swipe-item
    width 100%
    img
      width 100%
</style>